<template>
  
  <div class="detail">
    <Header title="账单详情" />
    <div class="card">
      <div class="type">
        <span
          :class="{ expense: state.detail.pay_type == 1, income: state.detail.pay_type == 2 }"
        >
          <i class="iconfont canyin" 
          :class="state.detail.type_id ? typeMap[state.detail.type_id].icon : 0"/>
        </span>
        <span>{{ state.detail.type_name || '' }}</span>
      </div>
      <div class="amount expense" v-if="state.detail.pay_type == 1">
        -{{ state.detail.amount }}
      </div>
      <div class="info">
        <div class="time">
          <span>记录时间</span>
          <span>{{ $filters.transYDM(Number(state.detail.date)) }}</span>
        </div>
        <div class="remark">
          <span>备注</span>
          <span>{{ state.detail.remark || '-' }}</span>
        </div>
      </div>
      <div class="operation van-hairline--top">
        <span class="van-hairline--right" @click="deleteDetail"
          ><van-icon name="delete" />删除</span
        >
        <span><van-icon name="edit" @click="openModal"/>编辑</span>
      </div>
      <PopAdd
    v-if="state.detail.id"
    ref="popAddRef"
    :detail="state.detail"
    @refresh="getDetail"
  />
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from "../components/Header.vue";
import { onMounted, reactive,ref} from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { typeMap } from "../utils";
  import axios from "../utils/axios";
  import {  showConfirmDialog,showSuccessToast } from "vant";
  import PopAdd from "../components/PopAdd.vue";

  const popAddRef = ref()
  const route = useRoute();
      const router = useRouter();
      const { id } = route.query;
      const state = reactive({
        typeMap, // 消费类型图标对象
        detail: {}, // 详情
      });

onMounted (async ()=> {
  getDetail()
})

const getDetail =async()=>{
  const {data}=await axios.get(`/bill/detail?id=${id}`)
  state.detail=data
  console.log();
}

const deleteDetail = () => {
  showConfirmDialog({
          title: "删除",
          message: "确认删除账单？",
        })
        .then( async() => {
          const {data}=await axios.post("/bill/delete",{id})
          showSuccessToast('删除成功')
          router.back()
        }).catch(() => {
          
        });

}

const  openModal = () => {
 
        popAddRef.value.addToggle()
       
      }


</script>



<style lang='scss' scoped>
 .detail {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    padding: 12px 24px 0 24px;
  }
  .card {
    margin-top:33px ;
    border-radius: 12px;
    background-color: #fff;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .type {
      padding: 24px 0 12px 0;
      span:nth-of-type(1) {
        display: inline-block;
        width: 22px;
        height: 22px;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        margin-right: 8px;
      }
      .expense {
        background-color: $primary;
      }
      .income {
        background-color: $text-warning;
      }
    }
    .amount {

      font-size: 24px;
      font-weight: 600;
      margin-bottom: 24px;
    }
    .info {
      width: 100%;
      font-size: 14px;
      text-align: left;
      .time {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 12px;
        span:nth-of-type(1) {
          flex: 3;
          color: $color-text-caption;
        }
        span:nth-of-type(2) {
          flex: 9;
        }
      }
      .remark {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 12px;
        span:nth-of-type(1) {
          flex: 3;
          color: $color-text-caption;
        }
        span:nth-of-type(2) {
          flex: 9;
          color: $color-text-base;
        }
      }
    }
    .operation {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      font-size: 16px;
      .van-icon {
        margin-right: 4px;
      }
      span {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        flex: 1
      }
      span:nth-of-type(1) {
        color: red;
      }
    }
  }
</style>